import React from "react";
import type { FC } from "react";
// import "./all.scss";
import "./index.scss";
import {
  FormOutlined,
  UserOutlined,
  SearchOutlined,
  HomeOutlined,
  StarOutlined,
  SettingOutlined,
} from "@ant-design/icons";

const HiddenMenu: FC = () => {
  return (
    <div className="main">
      <li style={{ "--l": "20%" } as React.CSSProperties}>
        <a
          onClick={() => {
            console.log(111111);
          }}
        >
          <FormOutlined />
        </a>
      </li>
      <li style={{ "--l": "30%" } as React.CSSProperties}>
        <a href="#">
          <UserOutlined />
        </a>
      </li>
      <li style={{ "--l": "40%" } as React.CSSProperties}>
        <a href="#">
          <SearchOutlined />
        </a>
      </li>
      <li style={{ "--l": "50%" } as React.CSSProperties}>
        <a href="#">
          <HomeOutlined />
        </a>
      </li>
      <li style={{ "--l": "60%" } as React.CSSProperties}>
        <a href="#">
          <StarOutlined />
        </a>
      </li>
      <li style={{ "--l": "70%" } as React.CSSProperties}>
        <a href="#">
          <SettingOutlined />
        </a>
      </li>

      <div className="top"></div>
      <div className="middle"></div>
      <div className="bottom"></div>
    </div>
  );
};

export default HiddenMenu;
